import './index.less';
import React from "react";
import { componentClass, ComponentProps } from "../../../../common/Component";

export interface TableProps extends ComponentProps{
    
}

export function Table(props: React.PropsWithChildren<TableProps>){
    return <table className={componentClass(props, 'apps-markdown-table')}>
    {props.children}
    </table>
}

export function Thead(props: React.PropsWithChildren<ComponentProps>){
    return <thead className={componentClass(props, 'apps-markdown-thead')}>
    {props.children}
    </thead>
}

export function Tbody(props: React.PropsWithChildren<ComponentProps>){
    return <thead className={componentClass(props, 'apps-markdown-tbody')}>
    {props.children}
    </thead>
}


export function Tr(props: React.PropsWithChildren<ComponentProps>){
    return <tr className={componentClass(props, 'apps-markdown-tr')}>
    {props.children}
    </tr>
}

export interface CellProps extends ComponentProps{
    align?: "left" | "center" | "right" 
}


export function Th(props: React.PropsWithChildren<CellProps>){
    return <th align={props.align} className={componentClass(props, 'apps-markdown-th')}>
    {props.children}
    </th>
}

export function Td(props: React.PropsWithChildren<CellProps>){
    return <td align={props.align} className={componentClass(props, 'apps-markdown-td')}>
    {props.children}
    </td>
}